<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="shortcut" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" sizes="any" mask="" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"> -->
  <link rel="shortcut icon" href="./favicon1.ico">
  <title>Document</title>
</head>

<body>
  <form action="">01</form>
  <form action="">02</form>
  <form action="">03</form>
  <form action="">04</form>
  <form action="">05</form>
  <form action="">06</form>
  <form action="">07</form>
  <form action="">08</form>
  <form action="">09</form>
  <form action="">10</form>

  <!-- <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="123123123">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="123123123">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="123123123">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="123123123">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="123123123">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="123123123">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="123123123"> -->
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
</body>
<script>
  // document(文档对象)  => window.document

  // window => document => html => body =>
  // console.log(document);   //打印document结构

  // 注意
  // 1. 每个载入浏览器的 HTML 文档都会成为Document对象。
  // 2. 通过document对象可以对HTML 页面中的所有元素进行访问
  // 3. document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问

  // console.log(typeof document); // "object"

  // document 的本子也是一个对象  => 如果向查找该对象的详细属性和方法 需要借助 console.dir()
  console.dir(document);

  // document相关的属性和方法  

  // 属性
  // document.all       提供对文档中所有 HTML 元素的访问。是数组类型
  // document.forms     提供对文档中所有 forms 元素的访问。是数组类型
  // document.images    提供对文档中所有 images 元素的访问。是数组类型
  // document.links     提供对文档中所有 a 元素的访问。是数组类型
  // document.documentElement  提供对 html 元素的直接访问。
  // document.body             提供对 body 元素的直接访问。
  // document.head             提供对 head 元素的直接访问。
  // document.title            获取和设置 网页标题的内容

  // document.bgColor          可以改变文档的颜色



  // console.log(document.all);
  // console.log(document.forms);
  // console.log(document.images);
  // console.log(document.links);

  console.log(document.documentElement);  // html
  console.log(document.body);             // body
  console.log(document.head);             // body

  document.body.style.backgroundColor = "red";
  document.bgColor = "blue";



  console.log(document.title);
  document.title = dateFormat("hh:mm:ss");
  var timer = setInterval(function () {
    document.title = dateFormat("hh:mm:ss");
  }, 1000)



  function dateFormat(pattern, date) {
    // var pattern = "YYYY/MM/DD  hh:mm:ss";

    // 设置默认值
    date = date == undefined ? new Date() : new Date(date);

    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();

    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();

    // replace的链式操作: 方法执行后  返回的也是一个字符串
    // replace()   返回的是一个新字符串  

    return pattern.replace("YYYY", year).replace("MM", beauty(month)).replace("DD", beauty(day)).replace("hh", beauty(hour)).replace("mm", beauty(minute)).replace("ss", beauty(second))
  }


  function beauty(num) {
    return num < 10 ? "0" + num : num;
  }





</script>

</html>